<!DOCTYPE html>
{% load i18n %}
<html lang="en">
<head>
    {% block head %}
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{{ APP_CODE }}</title>
        <link rel="icon" href="{{ STATIC_URL }}open/favicon.ico"
              type="image/x-icon">
        <meta name="description" content=""/>
        <meta name="author" content=""/>
        <link href="{{ REMOTE_STATIC_URL }}v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/components_pro/layout6/css/index.css"
              rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/dialog.css" rel="stylesheet">
        {#<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">#}
        <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker-2.0.css"
              rel="stylesheet">
        <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/themes/default/css/umeditor.css"
              rel="stylesheet">

        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <style>
            /*如果你需要给你的应⽤固定⾼度和宽度，请在这⾥修改*/
            body {
                min-width: 1202px;
            }

            .container {
                width: auto;
                min-width: 1200px;
            }

            /*
              重新设置蓝鲸的导航栏样式
              包括顶部导航栏和左边的导航栏
             */
            .sidebar-nav {
                background-image: linear-gradient(to right, #414141 10px, #626262 10px);
            }

            .sidebar-nav ul a {
                color: #fafafa;
            }

            .bk-horz-nav, .bk-horz-nav11 {
                background-color: #414141;
            }

            .bk-horz-nav .bk-nav-links > li:hover, .bk-horz-nav11 .bk-nav-links > li:hover {
                background-color: #626262;
            }

            .bk-horz-nav .bk-nav-links > li > a, .bk-horz-nav11 .bk-nav-links > li > a {
                color: #ffffff;
            }

            /* 自定义的按钮样式 */
            .mybutton1{
                font-size: 18px;
                color: #5e5b5d;
                width: 200px;
                height: 50px;
                background-color: transparent;
                border-radius: 5px;
                border: 2px solid #5e5b5d;
            }
            .mybutton1:hover{
                border: 2px solid #bcbcbc;
                color: #bcbcbc;
            }
            .mybutton1:focus{
                outline:0;
            }
            .mybutton2{
                text-align: center;
                font-size: 16px;
                color: white;
                width: 100px;
                height: 35px;
                background-color: rgba(0,0,0,0.6);
                border-radius: 5px;
                border: 1px solid #5e5b5d;
            }
            .mybutton2:hover{
                border: 1px solid #bcbcbc;
                background-color: rgba(0,0,0,0.8);
            }
            .mybutton2:focus{
                outline:0;
            }
        </style>
    {% endblock %}
</head>
<body>
<!--顶部导航 Start-->
{% block nav %}
<nav class="bk-horz-nav11">
    <div class="bk-nav-logo fl">
        <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo1.png">
        {% trans '忆存' %}
    </div>
    <div id="userImgAndName" class="bk-nav-user fr" style="color: white">
    </div>
    <ul class="bk-nav-links fr">
        <li>
            <a onclick="jumpToPublicSquare()">记忆广场</a>
        </li>
        <li>
            <a onclick="jumpToMain()">我的碎片</a>
        </li>
        <li class="bk-has-submenu">
            <a onclick="jumpToPersonalCenter()">个人中心</a>
            <ul class="bk-submenu">
                <li>
                    <a onclick="jumpToMyCollect()">我的收藏</a>
                </li>
                <li>
                    <a href="javascript:">
                        我的关注
                    </a>
                </li>
            </ul>
        </li>
        <li class="bk-has-submenu">
            <a href="javascript:void(0)">
                <span>{% trans "语⾔" %}</span>
            </a>
            <ul class="bk-submenu">
                <li>
                    <a href="javascript:">
                        简体中⽂
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        English
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="{{ SITE_URL }}memory_storage">登出</a>
        </li>

    </ul>
</nav>

{% endblock %}
<!--顶部导航 End-->

<!-- 固定宽度居中 start -->
{% block content %}{% endblock %}
<!-- 固定宽度表单居中 end -->
<!-- 尾部声明 start -->
{% block footer %}

    <div class="foot" id="footer">
        <footer class="bk-footer">
            <div class="bk-footer-links">
                <ul>
                    <li>
                        <a href="###">QQ咨询</a>
                    </li>
                    <li>
                        <a href="###">蓝鲸论坛</a>
                    </li>
                    <li>
                        <a href="###">蓝鲸官⽹</a>
                    </li>
                    <li>
                        <a href="###">蓝鲸智云⼯作台</a>
                    </li>
                </ul>
            </div>
            <p class="bk-footer-copyright">
                Copyright &copy; 2012-2020 Tencent BlueKing. All Rights
                Reserved. 蓝鲸智云 版权所有
            </p>
        </footer>
    </div>
{% endblock %}
<!-- 尾部声明 start -->
</body>
{% block base_js %}
    <script src="{{ REMOTE_STATIC_URL }}v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="{{ REMOTE_STATIC_URL }}v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>

    {#    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/datatables-1.10.7/jquery.dataTables.js"></script>#}
    {#    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/datatables-1.10.7/dataTables.bootstrap.js"></script>#}
    {#    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>#}
    {#    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDialog-2.0/js/bkDialog.js"></script>#}

    <!-- datatables js -->
    <script src="{{ STATIC_URL }}datatables-1.10.7/jquery.dataTables.js"></script>
    <script src="{{ STATIC_URL }}datatables-1.10.7/dataTables.bootstrap.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDialog-2.0/js/bkDialog.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>

    <!-- 这个是全局配置，如果需要在js中使⽤app_code和site_url,则这个
    javascript⽚段⼀定要保留 -->
    <script type="text/javascript">
        var app_code = "{{ APP_CODE }}"; // 在蓝鲸系统⾥⾯注册的"应⽤编码;";
        var site_url = "{{ SITE_URL }}"; // app的url前缀,在ajax调⽤的时候;，应该加上该前缀;
        var remote_static_url = "{{ REMOTE_STATIC_URL }}"; //远程资源链接;，403;⻚⾯需要;，不要删除;
        var debug_mode = JSON.parse("{{ DEBUG }}"); // 是否调试模式
    </script>
    <!--统计js 勿删-->
    <script src="{{ REMOTE_STATIC_URL }}analysis.js?v={{ STATIC_VERSION }}"></script>
    <script src="{{ STATIC_URL }}account/login.js?v={{ STATIC_VERSION }}"></script>
    <script src="{{ STATIC_URL }}js/csrftoken.js?v={{ STATIC_VERSION }}"></script>





    <script>
        var relative_path = "{{ APP_PATH }}";
        console.log(relative_path);
        if (relative_path == site_url)
            $('#home').addClass('king-navbar-active');
        else if (relative_path == site_url + "dev-guide/")
            $('#guide').addClass('king-navbar-active');
        else if (relative_path == site_url + "contact/")
            $('#contact').addClass('king-navbar-active');

        function change_language(lang) {
            $.ajax({
                url: site_url + 'i18n/setlang/',
                method: 'post',
                data: {
                    'language': lang,
                },
                success: function (ret) {
                    window.location.reload()
                }
            })
        }

        /*
        加载用户头像和昵称
         */
        $.ajax({
            method: 'POST',
            url : '{{ SITE_URL }}memory_storage/get_user_pic/',
            data: {
                'user_id': GetQueryString('user_id'),
                'csrfmiddlewaretoken': "{{ csrf_token }}"
            },
            success: function (response) {
                if (response['result']){
                    var pic = '';
                    var username ='';
                    pic = response['data']['pic'];
                    username = response['data']['username'];
                    //console.log(response['data'])
                    {#let html = '<span class="mr5">' + username + '</span>'#}
                    {#+ '<img src="' + {{ STATIC_URL }} + pic + '">';#}
                    var html = `<span class="mr5">${username}</span><img src={{ STATIC_URL }}${pic}>`;
                    $("#userImgAndName").append(html)



                }else{
                    {#new bkMessage({#}
                    {#    message: response['message'],#}
                    {#    theme: 'error',#}
                    {#    delay: 3000#}
                    {# });#}
                }
            }
        });

        function jumpToPersonalCenter(){
            window.location.href = "{{ SITE_URL }}memory_storage/person?user_id=" + GetQueryString('user_id');
        }

        function jumpToPublicSquare(){
            window.location.href = "{{ SITE_URL }}memory_storage/public_square?user_id=" + GetQueryString('user_id');
        }

        function jumpToMain(){
            window.location.href = "{{ SITE_URL }}memory_storage/main?user_id=" + GetQueryString('user_id');
        }

        function jumpToMyCollect(){
            window.location.href = "{{ SITE_URL }}memory_storage/person/my_collect?user_id=" + GetQueryString('user_id');
        }
        /*
        * 用于获取url中的值
        * */
        function GetQueryString(name)
        {
             var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
             var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
             if(r!=null)
                 return  unescape(r[2]);
             return null;
        }
    </script>
{% endblock %}
{% block extra_block %}
    <!--
    这⾥放置⼦⻚⾯中附加内容，⼀般为js，注意⼦模版中的js如果使⽤到以上js库，必须
   放置在这⾥
    -->

{% endblock %}

</html>